<template>
  <div class="district-selector">
    <a-tree-select
      :tree-data="treeData"
      v-model:value="model"
      class="w-[100%]"
      allow-clear
      :field-names="{ label: 'district', value: 'districtId' }"
    ></a-tree-select>
  </div>
</template>

<script setup lang="ts">
import type { AxDistrict } from '@/api/modules/ax/district/types';
import { getDistrictTree } from '@/api/modules/ax/district/utils';

type PropValue = string | number;

const treeData = ref<AxDistrict[]>([]);
const model = defineModel('modelValue');
const value = ref<PropValue>();
const props = defineProps<{
  modelValue: PropValue;
}>();
onMounted(async () => {
  treeData.value = await getDistrictTree();
});

watch(
  props,
  () => {
    value.value = props.modelValue;
  },
  {
    immediate: true,
    deep: true,
  },
);
</script>

<style lang="scss" scoped>
.district-selector {
  width: 100%;
}
</style>
